<!-- 本页样式 -->
<style scoped>
.footer {
	text-align: center;
}
.custom-tree-node {
	display: flex;
	width: 100%;
	flex-direction: row;
	position: relative;
}
.label_title {
	/* flex: 1; */
}
.group_content {
	position: absolute;
	right: 0px;
	left: 150px;
	top: 0px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	/* flex: 2; */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-start;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	margin-right: 20px;
}
.el-checkbox {
	margin-right: 15px;
}
</style>
<!-- 页面布局-->
<template>
	<div>
		<div class="table">
			<div class="container" style="overflow:auto;height:500px;padding-top:15px;">
				<div class="search-box">
					<div class="search-item-box">
						<table>
							<tr>
								<td>
									<el-select v-model="parampters.modtype" clearable placeholder="请选择模块类型">
										<el-option
											v-for="item in dicts.modetype"
											:key="item.CODE"
											:label="item.NAME"
											:value="item.CODE"
										></el-option>
									</el-select>
								</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>
									<el-button type="primary" icon="search" @click="init">查询</el-button>
								</td>
							</tr>
						</table>
					</div>
				</div>
				<el-tree
					:data="models"
					v-loading="loading"
					show-checkbox
					default-expand-all
					node-key="ID"
					ref="tree"
					highlight-current
					:props="defaultProps"
					:expand-on-click-node="false"
				>
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span class="label_title">{{ data.LABEL }}</span>
						<!-- <span class="group_content">
							<el-checkbox-group v-model="data.modfuncs" @change="getCheckFuns">
								<el-checkbox
									:label="item.name"
									v-for="(item,index) in data.funcs"
									:key="index"
								>{{item.desr}}</el-checkbox>
							</el-checkbox-group>
						</span> -->
					</span>
				</el-tree>
			</div>
		</div>
		<div class="footer">
			<el-button type="primary" @click="saverolemodes">确 定</el-button>
			<el-button @click="handleCancel">取 消</el-button>
		</div>
	</div>
</template>
<script>
import { mapGetters } from "vuex";
import { debug } from "util";

export default {
	data() {
		return {
			checkList: [],
			parampters: {
				modtype: "" //模块类型
			},
			//字典集
			dicts: {},
			models: [],
			defaultProps: {
				children: "children",
				label: "label"
			},
			expandedkeys: [],
			checkedkeys: [],
			modeseles: [],
			allkeys: [],
			loading: false
		};
	},
	props: {
		sourceData: {
			required: true
		}
	},
	// 进入页面加载数据
	mounted() {
		this.initSelectOptoins();
	},
	methods: {
		/**
		 * 初始加载字典选项
		 */
		initSelectOptoins() {
			this.loadSelectOptoins("modetype", null);
		},
		/**
		 * 通用定义方法：加载下拉选择 字典
		 *  @augments dictKind 字典类型
		 */
		loadSelectOptoins(dictKind, params) {
			this.$dicts
				.loadDict(this.httpRoot.BASEURL_UIM, params, dictKind)
				.then(res => {
					this.$set(this.dicts, dictKind, res);
					this.parampters.modtype = this.dicts[dictKind][0].CODE;
					this.init();
				});
		},
		init: function() {
			this.loading = true;
			this.$axios
				.get(
					this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsrolemodel/torolemodes",
					{
						params: {
							roleid: this.sourceData.roleid,
							loginsid: this.sourceData.loginInfo.sessionId,
							listtype: "tree",
							modtype: this.parampters.modtype
						}
					}
				)
				.then(res => {
					if (res.data.result == "true") {
						let models = res.data.resultData.children;
						// if ("children" in this.models[0]) {
						this.inititrator(models);
						// };
						this.$refs.tree.setCheckedKeys(this.checkedkeys, false);
					} else {
						//console.log("加载失败" + res.data.resultMessage + ",错误代码:" + res.data.resultCode);
					}
					this.loading = false;
				})
				.catch(function(error) {
					//console.log(error);
				});
		},
		inititrator(data) {
			data.forEach(item => {
				this.allkeys.push(item.ID);
				if (item.allowfuncs) {
					item.modfuncs = item.allowfuncs.split(",");
				} else {
					item.modfuncs = [];
				}
				if (item.CHK == "1" || item.CHK == 1) {
					if (!("children" in item)) {
						this.checkedkeys.push(item.ID);
					}
				}
				if ("children" in item) {
					this.inititrator(item.children);
				}
			});
			this.models = data;
		},

		handleCancel() {
			this.$emit("cancel", this.cancelData);
		},
		saverolemodes() {
			let tree = this.$refs.tree;
			//当前节点以及半选父节点
			this.checkedkeys = tree
				.getCheckedKeys(false)
				.concat(this.$refs.tree.getHalfCheckedKeys());
			let uncheckedkeys = this.allkeys.slice(0);
			this.checkedkeys.forEach((v, i) => {
				let ii = uncheckedkeys.indexOf(v);
				if (ii != -1) {
					uncheckedkeys.splice(ii, 1);
				}
			});
			//组织节点选择的情况
			this.modeseles = [];
			this.getModeSeles(tree.data, this.checkedkeys);
			this.loading = true;
			this.$axios
				.post(
					this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsrolemodel/saverolemodes",
					{
						roleid: this.sourceData.roleid, // 角色ID
						unmodeids: uncheckedkeys.join(","), //未分配功能ID集合，使用‘,’分隔
						modeids: "", //分配的角色ID集合，使用‘,’分隔
						loginsid: this.sourceData.loginInfo.sessionId, //登录成功后系统返回的会话ID
						modeseles: this.modeseles
					}
				)
				.then(res => {
					this.loading = false;
					if (res.data.result == "true") {
						this.$message.success(res.data.resultMessage);
						this.handleCancel(); //成功后关闭弹窗
					} else {
						//console.log("加载失败" + res.data.resultMessage + ",错误代码:" + res.data.resultCode);
					}
				})
				.catch(function(error) {
					//console.log(error);
				});
		},
		getModeSeles(data, chkedmodeids) {
			data.forEach(item => {
				let obj = {
					modeid: item.ID,
					modfuncs: ""
				};
				if (chkedmodeids.indexOf(item.ID) != -1) {
					this.modeseles.push(obj);  
					//
					if (item.modfuncs.length > 0) {
						obj.modfuncs = item.modfuncs.join(",");
					} 
				}
				//
				if ("children" in item) {
					this.getModeSeles(item.children, chkedmodeids);
				} 
			});
		},
		getCheckFuns(val) {
			//console.log(val);
		}
	}
};
</script>
